<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="keywords" content="html5,jquery,ui,widgets,ajax,ria,web framekwork,web development,easy,easyui,datagrid,treegrid,tree">
		<meta name="description" content="jQuery EasyUI is a complete framework for HTML5 web page. It provides easy to use components for building modern, interactive, javascript applications that work on pc and mobile devices.">
		<title>validatebox - Documentation - jQuery EasyUI</title>
        <link rel="stylesheet" href="/css/kube.css" type="text/css" />
        <link rel="stylesheet" type="text/css" href="../css/main.css">
		<link rel="stylesheet" type="text/css" href="../../prettify/prettify.css">
		<script type="text/javascript" src="../../prettify/prettify.js"></script>
		<script type="text/javascript" src="/easyui/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
								$('textarea[name="code-validatebox"]').each(function(){
					var data = $(this).val();
					data = data.replace(/(\r\n|\r|\n)/g, '\n');
					if (data.indexOf('\t') == 0){
						data = data.replace(/^\t/, '');
						data = data.replace(/\n\t/g, '\n');
					}
					data = data.replace(/\t/g, '    ');
					var pre = $('<pre name="code" class="prettyprint linenums"></pre>').insertAfter(this);
					pre.text(data);
					$(this).remove();
				});
				prettyPrint();
			});
		</script>
	</head>
	<body>
		<div id="header" class="group wrap header">
			<div class="content">
	<div class="navigation-toggle" data-tools="navigation-toggle" data-target="#navbar-1">
		<span>EasyUI</span>
	</div>
	<div id="elogo" class="navbar navbar-left">
		<ul>
			<li>
				<a href="/index.php"><img src="/images/logo2.png" alt="jQuery EasyUI"/></a>
			</li>
		</ul>
	</div>
	<div id="navbar-1" class="navbar navbar-right">
		<ul>
			<li><a href="/index.php">Home</a></li>
			<li><a href="/demo/main/index.php">Demo</a></li>
			<li><a href="/tutorial/index.php">Tutorial</a></li>
			<li><a href="/documentation/index.php">Documentation</a></li>
			<li><a href="/download/index.php">Download</a></li>
			<li><a href="/extension/index.php">Extension</a></li>
			<li><a href="/contact.php">Contact</a></li>
			<li><a href="/forum/index.php">Forum</a></li>
		</ul>
	</div>
	<div style="clear:both"></div>
</div>
<script type="text/javascript">
	function setNav(){
		var demosubmenu = $('#demo-submenu');
		if (demosubmenu.length){
			if ($(window).width() < 450){
				demosubmenu.find('a:last').hide();
			} else {
				demosubmenu.find('a:last').show();
			}
		}
		if ($(window).width() < 767){
			$('.navigation-toggle').each(function(){
				$(this).show();
				var target = $(this).attr('data-target');
				$(target).hide();
				setDemoNav();
			});
		} else {
			$('.navigation-toggle').each(function(){
				$(this).hide();
				var target = $(this).attr('data-target');
				$(target).show();
			});
		}
	}
	function setDemoNav(){
		$('.navigation-toggle').each(function(){
			var target = $(this).attr('data-target');
			if (target == '#navbar-demo'){
				if ($(target).is(':visible')){
					$(this).css('margin-bottom', 0);
				} else {
					$(this).css('margin-bottom', '2.3em');
				}
			}
		});
	}
	$(function(){
		setNav();
		$(window).bind('resize', function(){
			setNav();
		});
		$('.navigation-toggle').bind('click', function(){
			var target = $(this).attr('data-target');
			$(target).toggle();
			setDemoNav();
		});
	})
</script>		</div>
		<div id="mainwrap">
			<div id="content" class="content">
			
<div style="padding:10px"><h3>ValidateBox</h3><p>Override defaults with $.fn.validatebox.defaults.</p><p>The validatebox is designed to validate the form input fields.If users enter invalid values, it will change the background color, display the alarm icon and a tooltip message.The validatebox can be integrated with form plugin and will prevent invalid fields from submission.</p><img src="images/validatebox.png"/><h4>Dependencies</h4><ul>	<li>tooltip</li></ul><h4>Usage</h4><p>Create validatebox from markup.</p><textarea name="code-validatebox" class="html"><input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'"></textarea><p>Create validatebox using javascript.</p><textarea name="code-validatebox" class="html"><input id="vv"></textarea><textarea name="code-validatebox" class="js">$('#vv').validatebox({	required: true,	validType: 'email'});</textarea><p>To check password and retype password are same.</p><textarea name="code-validatebox" class="js">// extend the 'equals' rule$.extend($.fn.validatebox.defaults.rules, {	equals: {		validator: function(value,param){			return value == $(param[0]).val();		},		message: 'Field do not match.'	}});</textarea><textarea name="code-validatebox" class="html"><input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true"><input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" 	required="required" validType="equals['#pwd']"></textarea><h4>Validate Rule</h4><p>The validate rule is defined by using required and validType property, here are the rules already implemented:</p><ul>	<li>email: Match email regex rule.</li>	<li>url: Match URL regex rule.</li>	<li>length[0,100]: Between x and x characters allowed.</li>	<li>remote['http://.../action.do','paramName']: Send ajax request to do validate value, return 'true' when successfully.</li></ul><p>To custom validate rule, override $.fn.validatebox.defaults.rules that defines a validator function and invalid message. For example, to define a minLength valid type:</p><textarea name="code-validatebox" class="js">$.extend($.fn.validatebox.defaults.rules, {	minLength: {		validator: function(value, param){			return value.length >= param[0];		},		message: 'Please enter at least {0} characters.'	}});</textarea><p>Now you can use the minLength validtype to define an input box that should be inputed at least 5 characters:</p><textarea name="code-validatebox" class="html"><input class="easyui-validatebox" data-options="validType:'minLength[5]'"></textarea><h4>Properties</h4><table class="doc-table"><tr><th><strong>Name</strong></th><th><strong>Type</strong></th><th><strong>Description</strong></th><th><strong>Default</strong></th></tr><tr><td>required</td><td>boolean</td><td>Defines whether the field should be inputed.</td><td>false</td></tr><tr><td>validType</td><td>string,array</td><td>Defines the field valid type, such as email, url, etc. Possible values are:<br/>1) a valid type string, apply a single validate rule.<br/>2) a valid type array, apply multiple validate rules.The multiple validate rules on a field are available since version 1.3.2.<br/>3) a key/value pairs, the key is the validing type name, the value is an array consisting validating parameters.<p>Code example:</p><pre>&lt;input class="easyui-validatebox" data-options="required:true,validType:'url'"&gt;&lt;input class="easyui-validatebox" data-options="	required:true,	validType:['email','length[0,20]']"&gt;&lt;input class="easyui-validatebox" data-options="	required:true,	validType:{		length:[10,30],		remote:['http://.../action.do','paramName']	}"&gt;</pre></td><td>null</td></tr><tr><td>delay</td><td>number</td><td>Delay to validate from the last inputting value.Available since version 1.3.2.</td><td>200</td></tr><tr><td>missingMessage</td><td>string</td><td>Tooltip text that appears when the text box is empty.</td><td>This field is required.</td></tr><tr><td>invalidMessage</td><td>string</td><td>Tooltip text that appears when the content of text box is invalid.</td><td>null</td></tr><tr><td>tipPosition</td><td>string</td><td>Defines the position of tip message when the content of text box is invalid. Possible values: 'left','right','top','bottom'.Available since version 1.3.2.</td><td>right</td></tr><tr><td>deltaX</td><td>number</td><td>Tooltip offset in the X direction. Available since version 1.3.3.</td><td>0</td></tr><tr><td>novalidate</td><td>boolean</td><td>Defines whether to turn off validation. Available since version 1.3.4.</td><td>false</td></tr><tr><td>editable</td><td>boolean</td><td>Defines whether the user can type text directly into the field. Available since version 1.4.5.</td><td>true</td></tr><tr><td>disabled</td><td>boolean</td><td>Defines whether to disable the validatebox. Available since version 1.4.5.</td><td>false</td></tr><tr><td>readonly</td><td>boolean</td><td>Defines whether the component is read-only. Available since version 1.4.5.</td><td>false</td></tr><tr><td>validateOnCreate</td><td>boolean</td><td>Defines whether to validate after creating the component. Available since version 1.4.5.</td><td>true</td></tr><tr><td>validateOnBlur</td><td>boolean</td><td>Defines whether to validate when losing focus. Available since version 1.4.5.</td><td>false</td></tr></table><h4>Events</h4><table class="doc-table"><tr><th><strong>Name</strong></th><th><strong>Parameters</strong></th><th><strong>Description</strong></th></tr><tr><td>onBeforeValidate</td><td>none</td><td>Fires before validate on a field. Available since version 1.4.</td></tr><tr><td>onValidate</td><td>valid</td><td>Fires when validate on a field. Available since version 1.4.</td></tr></table><h4>Methods</h4><table class="doc-table"><tr><th><strong>Name</strong></th><th><strong>Parameter</strong></th><th><strong>Description</strong></th></tr><tr><td>options</td><td>none</td><td>Return the options object.</td></tr><tr><td>destroy</td><td>none</td><td>Remove and destroy the component.</td></tr><tr><td>validate</td><td>none</td><td>Do the validation to determine whether the content of text box is valid.</td></tr><tr><td>isValid</td><td>none</td><td>Call validate method and return the validation result, true or false.</td></tr><tr><td>enableValidation</td><td>none</td><td>Enable validation. Available since version 1.3.4.</td></tr><tr><td>disableValidation</td><td>none</td><td>Disable validation. Available since version 1.3.4.</td></tr><tr><td>resetValidation</td><td>none</td><td>Reset validation. Available since version 1.4.5.</td></tr><tr><td>enable</td><td>none</td><td>Enable the component. Available since version 1.4.5.</td></tr><tr><td>disable</td><td>none</td><td>Disable the component. Available since version 1.4.5.</td></tr><tr><td>readonly</td><td>mode</td><td>Enable/Disable readonly mode. Available since version 1.4.5.<p>Code example:</p><pre>$('#tt').validatebox('readonly');		// enable readonly mode$('#tt').validatebox('readonly',true);	// enable readonly mode$('#tt').validatebox('readonly',false);	// disable readonly mode</pre></td></tr></table></div>﻿			</div>
		</div>
		<div id="footer" class="content text-centered">
			<div>Copyright © 2010-2017 www.jeasyui.com</div>
		</div>
	</body>
</html>